<template>
	<view class="background">
		<uni-section title="重置密码" type="circle">
			<view class="card">
				<uni-forms ref="form" :modelValue="forgetData">
					<uni-forms-item label="邮箱" required name="email">
						<uni-easyinput v-model="forgetData.email" type="text" trim="all"
							placeholder="请输入邮箱"></uni-easyinput>
					</uni-forms-item>
					<view class="sendBtn">
						<ll-sendbutton ref="sendBtn" @clickSend="onClickSend" text-color="#888" text-color-disable="#CBCBCB"
							:max-time="60"></ll-sendbutton>
					</view>
					<uni-forms-item label="验证码" required name="code">
						<uni-easyinput v-model="forgetData.code" type="text" trim="all"
							placeholder="请输入邮件中发送的验证码"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
				<view class="button-group">
					<button type="primary" size="mini" @click="checkCode">验证</button>
					<button type="warn" size="mini" @click="cancel">取消</button>
				</view>
			</view>
		</uni-section>
	</view>
</template>

<script setup>
	import {
		getMailCode,checkMailCode
	} from '@/common/js/api';
	import {
		ref
	} from 'vue';

	const forgetData = ref({
		email: '',
		code:''
	});
	const form = ref();
	const sendBtn = ref();

	const sendCode = () => {
		getMailCode(forgetData.value.email);
	};

	const onClickSend = () => {
		sendCode();
		setTimeout(() => {
			//发送成功,开始倒计时
			sendBtn.value.start()
		}, 500);
	};
	
	const checkCode = ()=> {
		checkMailCode(forgetData.value.email,forgetData.value.code).then(status => {
			uni.navigateTo({
				url:'/pages/forgetPwd/forgetReset/forgetReset?email=' + forgetData.value.email
			})
		})
	};
</script>

<style scoped lang="scss">
	.sendBtn {
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 10px;
	}
	
	.background {
		
	}
	
	.card {
		margin: 10px 10px;
	}
	
	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}
</style>